<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <Category @c3IdChangeHandle="c3IdChangeHandle" :scene="scene"></Category>
    </el-card>
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
      style="margin-top: 10px"
    >
      <div v-show="scene==0">
        <el-button
          type="primary"
          size="default"
          icon="el-icon-plus"
          @click="toAddSpu"
          :disabled="!category3Id"
          >添加Spu</el-button
        >
        <el-table
          border
          stripe
          size="medium"
          style="margin: 10px 0"
          :data="spuList"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <el-table-column
            label="序号"
            type="index"
            width="80px"
            align="center"
          ></el-table-column>
          <el-table-column label="Spu名称" prop="spuName"></el-table-column>
          <el-table-column label="Spu描述" prop="description"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-plus"
                @click="toAddSku(row)"
              ></el-button>
              <el-button
                type="warning"
                size="mini"
                icon="el-icon-edit"
                @click="toUpdate(row)"
              ></el-button>
              <el-button
                type="info"
                size="mini"
                icon="el-icon-info"
              ></el-button>
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="removeSpu(row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="getSpuList"
          :current-page="currentPage"
          :page-sizes="[3, 5, 7, 9]"
          :page-size="pageSize"
          layout=" prev, pager, next, jumper,->, sizes,total"
          :total="total"
        />
      </div>
      <SpuForm
        v-show="scene==1"
        ref="spuForm"
        @changescene="changescene"
        @success="success"
      >
      </SpuForm>
      <SkuForm v-show="scene==2" ref='SKUFORM'  @changescene="changescene"></SkuForm>
    </el-card>
  </div>
</template>

<script>
import SpuForm from "./components/spuform.vue";
import SkuForm from './components/Skuform.vue'
import { cloneDeep } from "lodash";
export default {
  name: "Spu",
  //组件通信方式 props pubsub ref vuex 全局事件总线 自定义事件\
  components: {
    SpuForm,
    SkuForm
  },
  data() {
    return {
      spuList: [],
      pageSize: 5,
      currentPage: 1,
      total: 0,
      category3Id: "",
      category1Id: "",
      category2Id: "",
      loading: false,
      scene: 0,
    };
  },
  methods: {
    c3IdChangeHandle({c1Id,c2Id,c3Id}) {
      console.log(c1Id,c2Id,c3Id);
      if (!c3Id) {
        this.spuList = [];
        return;
      }
      this.category3Id = c3Id;
      this.category2Id = c2Id;
      this.category1Id = c1Id;

      this.getSpuList();
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getSpuList();
    },
    async getSpuList(page = 1) {
      this.loading = true;
      this.currentPage = page;
      const { category3Id, pageSize } = this;
      let res = await this.$API.spu.getSpulist(
        this.currentPage,
        pageSize,
        category3Id
      );
      this.spuList = res.data.records;
      this.total = res.data.total;
      this.loading = false;
    },
    toAddSpu() {
      this.scene = 1;
      this.$refs.spuForm.initAddSpu(this.category3Id);
    },
    changescene() {
      this.scene = 0;
    },
    toUpdate(row) {
      this.scene = 1;
      let spu = cloneDeep(row);
      this.$refs.spuForm.initUpdateSpu(spu);
    },
    success(id) {
      this.getSpuList(id ? this.currentPage : 1);
    },
    toAddSku(row){
      this.scene=2;
      let spu ={...row}
      spu.category1Id=this.category1Id;
      spu.category2Id=this.category2Id;

      this.$refs.SKUFORM.initAddSku(spu);
    },
    async removeSpu(id){
      await this.$API.spu.remove(id);
      this.$message.success('删除成功');
      this.getSpuList();
    }
  },
};
</script>

<style lang="scss" scoped>
</style>